<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
      function $(id){
        return document.getElementById(id);
      }
      window.onload = function (){

        //得到tbody中所有input标签集合
        var inputArray = $("data").getElementsByTagName("input");
        for(let i=0;i<inputArray.length;i++){
            if(inputArray[i].type == "number"){//文本框
               inputArray[i].onblur = function (){
                  changeNum(this);
               }
            }
            else if(inputArray[i].type == "button"){//按钮
                 inputArray[i].onclick = function (){
                   removeProduct(this);
                 }
            }
        }
        computTotalPrice();
      }

      /**
       * 修改购买数量
       * @param textObj 数量文本框对象
       */
      function changeNum(textObj){
        //当数字文本框没有内容或为负数时，将文本框内容赋值为1
          if(textObj.value.length == 0 || textObj.value < 1){
            textObj.value = 1;
          }

          //得到单价
          //parentNode 表示得到当前元素的父元素。
          //previousElementSibling 表示得到当前元素上一个元素兄弟节点
          let price = textObj.parentNode.previousElementSibling.innerHTML;
          //得到单项总价的td元素
          //nextElementSibling 得到当前元素的下一个元素兄弟节点
          let tdObj = textObj.parentNode.nextElementSibling;
          tdObj.innerHTML = price * textObj.value;
          computTotalPrice();
      }

      /**
       * 移除商品
       * @param buttonObj 移除商品按钮对象
       */
      function removeProduct(buttonObj){
          buttonObj.parentNode.parentNode.remove();
          computTotalPrice();
      }

      /**
       * 计算总价
       */
      function computTotalPrice(){
        let sum = 0;
        //得到所有的tr元素
        let trArray = $("data").getElementsByTagName("tr");
        for(let i=0;i<trArray.length;i++){
          //得到每一行的td元素集合
          let tdArray = trArray[i].getElementsByTagName("td");
          sum += parseInt(tdArray[4].innerHTML);
        }
        $("totalSpan").innerHTML = sum;
      }
      
    </script>
</head>
<body>
    <table border="1" width="80%" cellspacing="0">
       <thead>
          <tr><th>编号</th><th>商品名</th><th>单价</th><th>购买数量</th><th>单项总价</th><th>操作</th></tr>
       </thead>

      <tbody id="data">
          <tr><td>001</td><td>面包</td><td>4</td><td><input type="number" value="1" min="1"></td>
            <td>4</td><td><input type="button" value="移除商品"></td></tr>
          <tr><td>004</td><td>可乐</td><td>2</td><td><input type="number" value="1" min="1"></td>
            <td>2</td><td><input type="button" value="移除商品"></td></tr>
          <tr><td>005</td><td>爆米花</td><td>8</td><td><input type="number" value="1" min="1"></td>
            <td>8</td><td><input type="button" value="移除商品"></td></tr>
          <tr><td>003</td><td>烤肠</td><td>5</td><td><input type="number" value="1" min="1"></td>
            <td>5</td><td><input type="button" value="移除商品"></td></tr>
      </tbody>
    </table>
    购物车总价：￥<span id="totalSpan"></span>
</body>
</html>
